<template>
	<view class="page">
		<view class="page-bg">
			<image style="width: 100%; height: 597rpx;" src="https://test.uaima.cn/public/static/img/bg.png" mode=""></image>
		</view>
		<view class="page-navbar" @click="route_search"
			:style="{paddingTop: `${statusBarHeight + 2}px`, width: `calc(100% - ${MenuButtonBoundingClientRectWidth + 40}px)`}">
			<view style="background-color: #fff;border-radius: 200rpx;">
				<u--input placeholder="请输入关键词" readonly prefixIcon="search" shape="circle">
				</u--input>
			</view>
			<view class="page-navbar-right">
				<view
					style="display: flex;font-weight: 400;font-size: 30rpx;color: #28BA54; align-items: center; justify-content: center;">
					<view style="width: 2rpx; height: 22rpx; margin-right: 22rpx; background: #28BA54;"></view>
					搜索
				</view>
			</view>
		</view>
		<view class="page-top">
			<scroll-view :scroll-x="true">
				<view class="scrollViewBox">
					<view class="page-top-item " v-for="item,index in classifyOList" :key="index">
						<image style="width: 240rpx; height: 120rpx;position: absolute;top: 0;left: 0;" :src="item.img" mode="">
						</image>
						<view style="font-size: 30rpx;color: #FFFFFF; position: absolute; top: 27rpx; left: 20rpx;">
							{{ item.cateName }}
						</view>
						<view
							style="font-weight: 400;font-size: 22rpx;color: #FFFFFF; position: absolute; bottom: 27rpx; left: 20rpx;">
							农产品卖全球
						</view>
					</view>
					<view style="width: 10rpx;height: 2rpx;flex-shrink: 0;"></view>
				</view>
			</scroll-view>
		</view>
		<view class="page-classify">
			<view class="page-classify-left">
				<view class="page-classify-left-item omit1" :class="[index===classifyIndexT&&'active-left-item']"
					@click="changeClassifyIndex('classifyIndexT',index)" v-for="item,index in classifyTList" :key="index">
					{{ item.cateName }}
				</view>
			</view>
			<view class="page-classify-right">
				<view class="page-classify-right-filter">
					<view class="page-classify-right-filter-item" :class="[
						isChildId() && 'activeItem' 
					]" @click="changeClassifyIndex('classifyIndexTh','-1')">
						全部
					</view>
					<view :class="[
						!isChildId() && queryParams.sid === item.id && 'activeItem'
					]" class="page-classify-right-filter-item" @click="changeClassifyIndex('classifyIndexTh',item.id)"
						v-for="item,index in classifyThList" :key="index">
						{{ item.cateName }}
					</view>
				</view>
				<scroll-view :scroll-y="true" @scrolltolower='scrolltolower'>
					<view class="page-classify-right-content">
						<view class="empty" v-if="commodityList.length === 0">
							<image class="emptyImg" src="https://test.uaima.cn/public/static/img/mine/emptySearch.png"></image>
							<view>暂无内容~</view>
						</view>
						<view class="page-classify-right-content-item" v-for="item,index in commodityList" :key="index"
							@click="route_product">
							<u--image radius='16rpx' :src="item.image" width="190rpx" height="190rpx"></u--image>
							<view class="page-classify-right-content-item-info ml-20">
								<view class="page-classify-right-content-item-info-title">
									{{ item.storeName }}
								</view>
								<view class="page-classify-right-content-item-info-doc">
									{{ item.storeInfo }}
								</view>
								<view class="page-classify-right-content-item-info-price">
									<view>
										<text style="font-size: 24rpx;">￥</text>
										{{ item.price }}
									</view>
									<image @click.stop="appendCard(item)" style="width: 57rpx;height: 57rpx;"
										src="123.57.57.219/static/icon/shopping-trolley-green.png" mode="">
									</image>
								</view>
							</view>
						</view>
						<u-gap height="80rpx"></u-gap>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import msg from "@/utils/msg.js"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				MenuButtonBoundingClientRectWidth: 0,
				queryParams: {
					page: 1,
					limit: 10,
					sid: ""
				},
				commodityList: [],
				total: 0,
				classify: [],
				// 一级分类
				classifyOList: [],
				classifyIndexO: 0,
				// 二级分类
				classifyTList: [],
				classifyIndexT: 0,
				// 二级id
				TThId: '',
				// 三级分类
				classifyThList: [],
			}
		},
		onLoad() {
			this.getHeight()
			this.category()
		},
		computed: {},
		methods: {
			appendCard(item) {
				this.$iApi.cartAdd({
					cartNum: 1,
					productId: item.id
				}).then(res => {
					msg.toast("已加入购物车");
				})
			},
			scrolltolower() {
				if (this.commodityList.length < this.total) {
					this.queryParams.page++;
					this.products()
				}
			},
			isChildId() {
				return this.TThId === this.queryParams.sid
			},
			changeClassifyIndex(type, i) {
				if (type === 'classifyIndexT') {
					this.classifyIndexT = i
					this.classifyThList = this.classifyOList[this.classifyIndexO].children[this.classifyIndexT].children
					this.resetSid()
					this.TThId = this.queryParams.sid
					this.products()
				} else if (type === 'classifyIndexTh') {
					if (i === '-1') {
						this.resetSid()
					} else this.queryParams.sid = i;
					this.products()
				}
			},
			resetSid() {
				this.queryParams.sid = this.classifyOList[this.classifyIndexO].children[this.classifyIndexT].id
			},
			// 分类
			category() {
				this.$iApi.category().then(res => {
					this.classifyOList = res.data
					this.classifyTList = res.data[this.classifyIndexO].children
					this.classifyThList = res.data[this.classifyIndexO].children[this.classifyIndexT].children
					this.queryParams.sid = res.data[this.classifyIndexO].children[this.classifyIndexT].id
					this.TThId = this.queryParams.sid
					this.products()
				})
			},
			// 商品
			products() {
				this.$iApi.products(this.queryParams).then(res => {
					this.commodityList = res.data
					if (this.queryParams.page === 1) this.commodityList = res.data
					else this.commodityList = [...this.commodityList, ...res.data]
					this.total = res.total;
				})
			},
			route_product() {
				uni.navigateTo({
					url: "/pages/product/index"
				})
			},
			route_search() {
				uni.navigateTo({
					url: "/pages/classify/search"
				})
			},
			// 获取微信右上角胶囊高度
			getHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
				const MenuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect()
				this.MenuButtonBoundingClientRectWidth = MenuButtonBoundingClientRect.width
			},
		},

	}
</script>
<style lang="scss" scoped>
	.page {
		&-bg {
			position: fixed;
			top: 0;
			width: 100%;
			height: 597rpx;
		}

		&-navbar {
			position: relative;
			padding-left: 30rpx;
			z-index: 1;

			::v-deep .u-input {
				border-radius: 200rpx;
				border: 1rpx solid #28BA54;
			}

			&-right {
				position: absolute;
				right: 30rpx;
				bottom: 18rpx;
			}
		}

		&-top {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			padding: 40rpx 0 20rpx 0rpx;
			gap: 0 20rpx;

			.scrollViewBox {
				display: flex;
				padding-left: 30rpx;
			}

			&-item {
				position: relative;
				width: 240rpx;
				height: 120rpx;
				background: linear-gradient(264deg, #F6D085 0%, #F4C475 100%);
				border-radius: 16rpx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
		}

		&-classify {
			position: relative;
			z-index: 1;
			display: flex;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0 0;
			width: calc(100% - 60rpx);
			height: 72.4vh;
			padding: 0 30rpx 40rpx 30rpx;
			overflow: hidden;

			&-left {
				height: 100%;
				width: 170rpx;
				padding-top: 40rpx;
				overflow: auto;
				border-right: 1rpx solid #D9D9D9;
				flex: none;

				&-item {
					font-weight: 400;
					font-size: 30rpx;
					color: #666666;
					line-height: 35rpx;
					margin-bottom: 59rpx;
					padding-left: 16rpx;
					transition: all 300ms;
					border-left: 1px solid #ffff;
				}

				.active-left-item {
					border-left: 1px solid #EA5D1F;
					font-weight: 500;
					font-size: 30rpx;
					color: #EA5D1F;
				}
			}

			&-right {
				flex: 1;
				width: 100%;

				&-filter {
					width: 520rpx;
					display: flex;
					white-space: nowrap;
					align-content: center;
					box-sizing: border-box;
					overflow: auto;
					gap: 0 20rpx;
					margin: 40rpx 20rpx;

					&-item {
						padding: 14rpx 20rpx;
						background: rgba(102, 102, 102, 0.06);
						white-space: nowrap;
						border-radius: 12rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #666666;
						line-height: 30rpx;
						border: 1rpx solid rgba(102, 102, 102, 0.06);
					}

					.activeItem {
						background: rgba(237, 123, 66, 0.06);
						border: 1rpx solid rgba(237, 123, 66, 0.3);
						color: #ED7B42;
					}
				}

				&-content {
					width: 100%;
					// height: calc(100% - 30rpx - 80rpx);
					padding-bottom: 40rpx;
					height: 62.8vh;
					display: flex;
					flex-direction: column;
					gap: 40rpx 0;

					&-item {
						width: calc(100% - 30rpx);
						padding-left: 30rpx;
						display: flex;
						align-content: center;

						&-info {
							width: 300rpx - 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							&-title {
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: normal;
								width: 100%;
							}

							&-doc {
								width: max-content;
								background: rgba(237, 123, 66, 0.06);
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								border: 1rpx solid rgba(237, 123, 66, 0.3);
								padding: 6rpx 10rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #ED7B42;
								line-height: 30rpx;
							}

							&-price {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-weight: 500;
								font-size: 32rpx;
								color: #ED7B42;
							}
						}
					}
				}
			}

		}

	}

	::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}
</style>